<template>
    <div>

        <!--发表评论-->
        <h4>发表评论 --- {{ newsid }}</h4>
        <hr>
        <textarea placeholder="请输入要评论的内容（最多120字）" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postMsg">发表评论</mt-button>

        <!--评论列表-->
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item, i) in cmtlist" :key="i">
                <div class="cmt-item-title">第{{ i+1 }}楼&nbsp;用户：{{ item.user_name }}&nbsp;发表时间：{{ item.add_time | dateFormat }}</div>
                <div class="cmt-item-body">{{ item.content }}</div>
            </div>
        </div>
        <!--加载更多评论-->
        <mt-button type="danger" size="large" plain @click="loadMore">加载更多</mt-button>

    </div>
</template>

<script>
    // 按需从 MintUI 中，导出需要的 弹框组件
    import { Toast } from "mint-ui";

    export default {
        data() {
            return {
                cmtlist: [],
                page:1,
                msg:''
            }
        },
        created() {
            this.getCommentByPage();
        },
        methods: {
            async getCommentByPage() {
                // 按page获取评论，并将获取到的新评论concat到已有评论后面
                const {data} = await this.$http.get("/api/getcomments/" + this.newsid + "?pageindex=" + this.page);
                if (data.status === 0) return (this.cmtlist = this.cmtlist.concat(data.message));
            },
            loadMore () {
                // 点击 加载更多，page++，根据新的页数获取更多评论
                this.page++;
                this.getCommentByPage();
            },
            async postMsg(){
                // 判断是否输入有效的评论内容
                if (this.msg.trim().length<=0) return Toast("请输入评论内容！");
                // 提交评论
                const {data}=await this.$http.post('/api/postcomment/'+this.newsid, {content:this.msg.trim()});
                // 若评论提交成功，则将新评论unshift到评论列表的数组中
                if (data.status===0) {
                    this.cmtlist.unshift({
                        user_name: "匿名用户",
                        add_time: new Date(),
                        content: this.msg.trim()
                    });
                    this.msg='';
                }
            }
        },
        props:['newsid']
    }
</script>

<style lang="scss" scoped>
    textarea {
        font-size: 14px;
        margin: 0;
    }
    .cmt-list {
        margin-top: 4px;
        .cmt-item {
            line-height: 30px;
            .cmt-item-title {
                font-size: 14px;
                background-color: #ddd;
            }
            .cmt-item-body {
                font-size: 13px;
                text-indent: 2em;
            }
        }
    }
</style>